<!doctype html>
<html class="no-js" lang="">
    <head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
        
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Home || Selphy</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- favicon
		============================================ -->		
        
		
		<!-- Google Fonts
		============================================ -->		
		<link href='../../../../css-OpenSans20030040050060070080.css' rel='stylesheet' type='text/css'>
	   
		<!-- Bootstrap CSS
		============================================ -->		
        <link rel="stylesheet" href="css/bootstrap.min.css">
		<!-- Font Awesome CSS
		============================================ -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
		<!-- Mean Menu CSS
		============================================ -->      
        <link rel="stylesheet" href="css/meanmenu.min.css">
		<!-- owl.carousel CSS
		============================================ -->
        <link rel="stylesheet" href="css/owl.carousel.css">
        <link rel="stylesheet" href="css/owl.theme.css">
        <link rel="stylesheet" href="css/owl.transitions.css">
		<!-- nivo-slider css
		============================================ --> 
		<link rel="stylesheet" href="css/nivo-slider.css">
		<!-- Price slider css
		============================================ --> 
		<link rel="stylesheet" href="css/jquery-ui-slider.css">
		<!-- Simple Lence css
		============================================ --> 
		<link rel="stylesheet" type="text/css" href="css/jquery.simpleLens.css">
		<link rel="stylesheet" type="text/css" href="css/jquery.simpleGallery.css">
		<!-- normalize CSS
		============================================ -->
        <link rel="stylesheet" href="css/normalize.css">
		<!-- main CSS
		============================================ -->
        <link rel="stylesheet" href="css/main.css">
		<!-- style CSS
		============================================ -->
        <link rel="stylesheet" href="style.css">
		<!-- responsive CSS
		============================================ -->
        <link rel="stylesheet" href="css/responsive.css">
		<!-- modernizr JS
		============================================ -->		
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<style>
			.carousel-inner img {
				width: 100%;
				height: 100%;
			}
		</style>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
		<!-- header-->
        <div id="header11"></div>
        <div id="item_box">
			<div id="demo" class="carousel slide" data-ride="carousel">

				<!-- 指示符 -->
				<ul class="carousel-indicators">
					<li data-target="#demo" data-slide-to="0" class="active"></li>
					<li data-target="#demo" data-slide-to="1"></li>
<!--					<li data-target="#demo" data-slide-to="2"></li>-->
				</ul>

				<!-- 轮播图片 -->
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="img/slider/slider1.jpg">
					</div>
					<div class="carousel-item">
						<img src="img/slider/slider2.jpg">
					</div>
				</div>

				<!-- 左右切换按钮 -->
				<a class="carousel-control-prev" href="#demo" data-slide="prev">
					<span class="carousel-control-prev-icon"></span>
				</a>
				<a class="carousel-control-next" href="#demo" data-slide="next">
					<span class="carousel-control-next-icon"></span>
				</a>

			</div>
		<!-- Main Slider Area -->
<!--		<div class="main-slider-area">-->
<!--			&lt;!&ndash; Main Slider &ndash;&gt;-->
<!--			<div class="main-slider">-->
<!--				<div class="slider">-->
<!--&lt;!&ndash;					<div id="mainSlider" class="nivoSlider slider-image">&ndash;&gt;-->
<!--						<a href=""><img src="img/slider/slider2.jpg" alt="main slider"></a>-->
<!--						<a href=""><img src="img/slider/slider1.jpg" alt="main slider"></a>-->
<!--&lt;!&ndash;					</div>&ndash;&gt;-->
<!--				</div>-->
<!--			</div>&lt;!&ndash; End Main Slider &ndash;&gt;-->
<!--		</div>&lt;!&ndash; End Main Slider Area &ndash;&gt;-->
		<!-- Top Banner Area -->
		<div class="top-banner-area">
			<div class="container">
				<div class="row">
					<div class="col-md-4 col-sm-4">
						<!-- Single Banner -->
						<div class="single-banner">
							<a href=""><img src="img/banner/banner1.png" alt="banner"></a>
						</div>
					</div>
					<div class="col-md-4 col-sm-4">
						<!-- Single Banner -->
						<div class="single-banner">
							<a href=""><img src="img/banner/banner2.png" alt="banner"></a>
						</div>
					</div>
					<div class="col-md-4 col-sm-4">
						<!-- Single Banner -->
						<div class="single-banner">
							<a href=""><img src="img/banner/banner3.png" alt="banner"></a>
						</div>
					</div>
				</div>
			</div>
		</div><!-- End Top Banner Area -->
		<!-- Single Product Area -->
		<div class="single-product-area"  >
			<div class="container" >
				<div class="row">
					<div class="col-md-12">
<!--                        {{items.classifyGoodsMap.hotGoods}}-->
						<!-- Single Product Tab -->
						<div class="single-product-tab custom-tab">

							<!-- Tabs Bar -->
							<ul class="nav nav-tabs" role="tablist">
								<li class="active"><a onclick="changeActive(2)" data-toggle="tab">笔记本电脑</a></li>
								<li><a onclick="changeActive(1)" data-toggle="tab">笔记本电脑</a></li>
								<li><a onclick="changeActive(3)" data-toggle="tab">数码相机</a></li>
								<li><a onclick="changeActive(4)" data-toggle="tab">其他</a></li>
							</ul><!-- End Tabs Bar -->
							<!-- Tab Content-->
							<div class="tab-content">
								<!-- Shop Product-->
<!--								分类展示热点商品-->
<!--								智能手机-->
								<div class="tab-pane active" id="cid2" >
									<!-- Tab Single Product-->
									<div class="tab-single-product">
										<!-- Single Product -->
										<template v-for="item in items.classifyGoodsMap.mobileGoods">
											<div class="singel-product single-product-col">
												<template v-if="item.status===4">
													<div class="label-pro-sale">竞拍</div>
												</template>
												<!--												<div class="label-pro-sale">竞拍</div>-->
												<template v-if="item.status===3">
													<div class="label-pro-new">公告</div>
												</template>
												<!-- Single Product Image -->
												<div class="single-product-img">
													<a  @click="changeUrl(item.gid)"><img :src="item.url" alt="product"></a>
												</div>
												<!-- Single Product Content -->
												<div class="single-product-content">
													<h2 class="product-name"><a @click="changeUrl(item.gid)"
																				href="product-details.html">{{item.gname}}</a>
													</h2>
													<div class="ratings">
														<div class="rating-box">
															<span>开始时间：{{item.start}}</span>
														</div>
													</div>
													<div class="product-price">
														<p>￥{{item.price}}</p>
													</div>
													<!-- Single Product Actions -->
													<div class="product-actions">
														<button class="button btn-cart" title="Add to Cart"
																type="button"><i
																class="fa fa-shopping-cart">&nbsp;</i><span @click="addEnshrine(item.gid)">加入收藏</span>
														</button>
													</div><!-- End Single Product Actions -->
												</div><!-- End Single Product Content -->
											</div><!-- End Single Product -->
										</template>
									</div>
								</div><!-- End Shop List -->
<!--								笔记本电脑-->
								<div class="tab-pane " id="cid1">
									<!-- Tab Single Product-->
									<div class="tab-single-product">
										<!-- Single Product -->
										<template v-for="item in items.classifyGoodsMap.pcGoods">
											<div class="singel-product single-product-col">
												<template v-if="item.status===4">
													<div class="label-pro-sale">竞拍</div>
												</template>
												<!--												<div class="label-pro-sale">竞拍</div>-->
												<template v-if="item.status===3">
													<div class="label-pro-new">公告</div>
												</template>
												<!-- Single Product Image -->
												<div class="single-product-img">
													<a  @click="changeUrl(item.gid)"><img :src="item.url" alt="product"></a>
												</div>
												<!-- Single Product Content -->
												<div class="single-product-content">
													<h2 class="product-name"><a @click="changeUrl(item.gid)"
																				href="product-details.html">{{item.gname}}</a>
													</h2>
													<div class="ratings">
														<div class="rating-box">
															<span>开始时间：{{item.start}}</span>
														</div>
													</div>
													<div class="product-price">
														<p>￥{{item.price}}</p>
													</div>
													<!-- Single Product Actions -->
													<div class="product-actions">
														<button class="button btn-cart" title="Add to Cart"
																type="button"><i
																class="fa fa-shopping-cart">&nbsp;</i><span @click="addEnshrine(item.gid)">加入收藏</span>
														</button>
													</div><!-- End Single Product Actions -->
												</div><!-- End Single Product Content -->
											</div><!-- End Single Product -->
										</template>
									</div>
								</div><!-- End Shop List -->
<!--								摄影摄像-->
								<div class="tab-pane " id="cid3">
									<!-- Tab Single Product-->
									<div class="tab-single-product">
										<!-- Single Product -->
										<template v-for="item in items.classifyGoodsMap.cameraGoods">
											<div class="singel-product single-product-col">
												<template v-if="item.status===4">
													<div class="label-pro-sale">竞拍</div>
												</template>
												<!--												<div class="label-pro-sale">竞拍</div>-->
												<template v-if="item.status===3">
													<div class="label-pro-new">公告</div>
												</template>
												<!-- Single Product Image -->
												<div class="single-product-img">
													<a  @click="changeUrl(item.gid)"><img :src="item.url" alt="product"></a>
												</div>
												<!-- Single Product Content -->
												<div class="single-product-content">
													<h2 class="product-name"><a @click="changeUrl(item.gid)"
																				href="product-details.html">{{item.gname}}</a>
													</h2>
													<div class="ratings">
														<div class="rating-box">
															<span>开始时间：{{item.start}}</span>
														</div>
													</div>
													<div class="product-price">
														<p>￥{{item.price}}</p>
													</div>
													<!-- Single Product Actions -->
													<div class="product-actions">
														<button class="button btn-cart" title="Add to Cart"
																type="button"><i
																class="fa fa-shopping-cart">&nbsp;</i><span @click="addEnshrine(item.gid)">加入收藏</span>
														</button>
													</div><!-- End Single Product Actions -->
												</div><!-- End Single Product Content -->
											</div><!-- End Single Product -->
										</template>
									</div>
								</div><!-- End Shop List -->
<!--								其他-->
								<div class="tab-pane " id="cid4">
									<!-- Tab Single Product-->
									<div class="tab-single-product">
										<!-- Single Product -->
										<template v-for="item in items.classifyGoodsMap.otherGoods">
											<div class="singel-product single-product-col">
												<template v-if="item.status===4">
													<div class="label-pro-sale">竞拍</div>
												</template>
												<!--												<div class="label-pro-sale">竞拍</div>-->
												<template v-if="item.status===3">
													<div class="label-pro-new">公告</div>
												</template>
												<!-- Single Product Image -->
												<div class="single-product-img">
													<a href=""><img :src="item.url" alt="product"></a>
												</div>
												<!-- Single Product Content -->
												<div class="single-product-content">
													<h2 class="product-name"><a title="Proin lectus ipsum"
																				href="product-details.html">{{item.gname}}</a>
													</h2>
													<div class="ratings">
														<div class="rating-box">
															<span>开始时间：{{item.start}}</span>
														</div>
													</div>
													<div class="product-price">
														<p>￥{{item.price}}</p>
													</div>
													<!-- Single Product Actions -->
													<div class="product-actions">
														<button class="button btn-cart" title="Add to Cart"
																type="button"><i
																class="fa fa-shopping-cart">&nbsp;</i><span>加入收藏</span>
														</button>
													</div><!-- End Single Product Actions -->
												</div><!-- End Single Product Content -->
											</div><!-- End Single Product -->
										</template>
									</div>
								</div><!-- End Shop List -->
							</div><!-- End Tab Content -->
						</div><!-- End Single Product Tab -->
					</div>
				</div>
			</div>
		</div><!-- End Single Product Area -->
		<!-- Product Area -->
		<div class="product-area">
			<div class="container">
				<div class="row">
					<div class="col-md-3">
						<!-- Product Left Sidebar Area -->
						<div class="product-left-siderbar">
							<!-- Timer product -->
							<div class="timer-product">
								<div class="timer-product-title">
									<h2>猜你喜欢</h2>
								</div>
								<!-- Timer product Carousel-->
<!--								<div id="timer-product-carousel" class="owl-carousel custom-carousel">-->
									<!-- Single Product -->
<!--									<div class="tab-single-product">-->
										<!-- Single Product -->
											<div class="singel-product single-product-col">
												<template v-if="items.classifyGoodsMap.otherGoods[0].status===4">
													<div class="label-pro-sale">竞拍</div>
												</template>
												<!--												<div class="label-pro-sale">竞拍</div>-->
												<template v-if="items.classifyGoodsMap.otherGoods[0].status===3">
													<div class="label-pro-new">公告</div>
												</template>
												<!-- Single Product Image -->
												<div class="single-product-img">
													<a  @click="changeUrl(items.classifyGoodsMap.otherGoods[0].gid)"><img :src="items.classifyGoodsMap.otherGoods[0].url" alt="product"></a>
												</div>
												<!-- Single Product Content -->
												<div class="single-product-content">
													<h2 class="product-name"><a @click="changeUrl(items.classifyGoodsMap.otherGoods[0].gid)"
																				href="product-details.html">{{items.classifyGoodsMap.otherGoods[0].gname}}</a>
													</h2>
													<div class="ratings">
														<div class="rating-box">
															<span>开始时间：{{items.classifyGoodsMap.otherGoods[0].start}}</span>
														</div>
													</div>
													<div class="product-price">
														<p>￥{{items.classifyGoodsMap.otherGoods[0].price}}</p>
													</div>
													<!-- Single Product Actions -->
													<div class="product-actions">
														<button class="button btn-cart" title="Add to Cart"
																type="button"><i
																class="fa fa-shopping-cart">&nbsp;</i><span @click="addEnshrine(items.classifyGoodsMap.otherGoods[0].gid)">加入收藏</span>
														</button>
													</div><!-- End Single Product Actions -->
												</div><!-- End Single Product Content -->
											</div><!-- End Single Product -->
<!--									</div>-->
<!--								</div>&lt;!&ndash; End Timer product Carousel&ndash;&gt;-->
							</div><!-- End Timer product -->
							<!-- Product Single Banner -->
							<!-- Featured Product Area -->
							<!--热点商品-->
							<div class="featured-product-area">
								<div class="featured-product-title">
									<h2>火爆商品</h2>
								</div>
								<!-- Featured Products -->
								<div class="featured-products">
									<div class="featured-product-category">
										<div class="featured-product-img">

											<a href=""><img :src="items.classifyGoodsMap.cameraGoods[0].url" alt="product"></a>

										</div>
										<div class="featured-product-content">
											<h2 class="product-name">
												<a href="product-details.html" title="Proin lectus ipsum">{{items.classifyGoodsMap.cameraGoods[0].gname}}</a>
											</h2>
											<div class="ratings">
												<div class="rating-box">
													截止时间：{{items.classifyGoodsMap.cameraGoods[0].stop}}
												</div>
											</div>
											<div class="product-price">
												<p>￥{{items.classifyGoodsMap.cameraGoods[0].price}}</p>
											</div>
										</div>
									</div>
								</div><!-- End Featured Products -->

							</div><!-- End Featured Product Area -->
						</div><!-- End Product Left Sidebar Area -->

					</div>
					<div class="col-md-9">
						<!-- Product View Area -->
						<div class="product-view-area fix">
							<!-- Single Product Category -->
							<div class="single-product-category">
								<!-- Product Category Title-->
								<div class="head-title">
									<p><a href="shop.html">正在竞拍</a></p>
								</div>
								<!-- Product View -->
<!--								<div class="tab-pane " >-->
									<!-- Tab Single Product-->
								<div class="tab-single-product">
										<!-- Single Product -->
										<template v-for="item in items.statusGoodsMap.auctioning">
											<div class="singel-product single-product-col">
												<template v-if="item.status===4">
													<div class="label-pro-sale">竞拍</div>
												</template>
												<!--												<div class="label-pro-sale">竞拍</div>-->
												<template v-if="item.status===3">
													<div class="label-pro-new">公告</div>
												</template>
												<!-- Single Product Image -->
												<div class="single-product-img">
													<a  @click="changeUrl(item.gid)"><img :src="item.url" alt="product"></a>
												</div>
												<!-- Single Product Content -->
												<div class="single-product-content">
													<h2 class="product-name"><a @click="changeUrl(item.gid)"
																				href="product-details.html">{{item.gname}}</a>
													</h2>
													<div class="ratings">
														<div class="rating-box">
															<span>开始时间：{{item.start}}</span>
														</div>
													</div>
													<div class="product-price">
														<p>￥{{item.price}}</p>
													</div>
													<!-- Single Product Actions -->
													<div class="product-actions">
														<button class="button btn-cart" title="Add to Cart"
																type="button"><i
																class="fa fa-shopping-cart">&nbsp;</i><span @click="addEnshrine(item.gid)">加入收藏</span>
														</button>
													</div><!-- End Single Product Actions -->
												</div><!-- End Single Product Content -->
											</div><!-- End Single Product -->
										</template>
<!--									</div>-->
								     </div><!-- End Shop List -->
							</div><!-- End Single Product Category -->
							<!-- Single Product Category -->
							<div class="single-product-category">
								<!-- Product Category Title-->
								<div class="head-title">
									<p><a href="shop.html">即将拍卖</a></p>
								</div>
								<!-- Product View -->
								<div class="tab-single-product">
									<!-- Single Product -->
									<template v-for="item in items.statusGoodsMap.noAuction">
										<div class="singel-product single-product-col">
											<template v-if="item.status===4">
												<div class="label-pro-sale">竞拍</div>
											</template>
											<!--												<div class="label-pro-sale">竞拍</div>-->
											<template v-if="item.status===3">
												<div class="label-pro-new">公告</div>
											</template>
											<!-- Single Product Image -->
											<div class="single-product-img">
												<a  @click="changeUrl(item.gid)"><img :src="item.url" alt="product"></a>
											</div>
											<!-- Single Product Content -->
											<div class="single-product-content">
												<h2 class="product-name"><a @click="changeUrl(item.gid)"
																			href="product-details.html">{{item.gname}}</a>
												</h2>
												<div class="ratings">
													<div class="rating-box">
														<span>开始时间：{{item.start}}</span>
													</div>
												</div>
												<div class="product-price">
													<p>￥{{item.price}}</p>
												</div>
												<!-- Single Product Actions -->
												<div class="product-actions">
													<button class="button btn-cart" title="Add to Cart"
															type="button"><i
															class="fa fa-shopping-cart">&nbsp;</i><span @click="addEnshrine(item.gid)">加入收藏</span>
													</button>
												</div><!-- End Single Product Actions -->
											</div><!-- End Single Product Content -->
										</div><!-- End Single Product -->
									</template>
									<!--									</div>-->
								</div><!-- End Shop List -->
								<!-- Product Banner-->
							</div><!-- End Single Product Category -->
						</div><!-- End Product View Area -->
					</div>
				</div>
			</div>
		</div><!-- End Product Area -->

		</div>

		<!-- footer -->
		<div id="footer11"></div>
		
		
		
		
		
		<!-- jquery
		============================================ -->		
        <script src="js/vendor/jquery-1.11.3.min.js"></script>
		<!-- bootstrap JS
		============================================ -->		
        <script src="js/bootstrap.min.js"></script>
		<!-- nivo slider js
		============================================ --> 
		<script src="js/jquery.nivo.slider.pack.js"></script>
		<!-- Mean Menu js
		============================================ -->         
        <script src="js/jquery.meanmenu.min.js"></script>
		<!-- price-slider JS
		============================================ -->		
        <script src="js/jquery-price-slider.js"></script>
		<!-- Simple Lence JS
		============================================ -->
		<script type="text/javascript" src="js/jquery.simpleGallery.min.js"></script>
		<script type="text/javascript" src="js/jquery.simpleLens.min.js"></script>	
		<!-- owl.carousel JS
		============================================ -->		
        <script src="js/owl.carousel.min.js"></script>
		<!-- scrollUp JS
		============================================ -->		
        <script src="js/jquery.scrollUp.min.js"></script>
		<!-- DB Click JS
		============================================ -->
        <script src="js/dbclick.min.js"></script>
		<!-- Countdown JS
		============================================ -->
        <script src="js/jquery.countdown.min.js"></script>
		<!-- plugins JS
		============================================ -->		
        <script src="js/plugins.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/axios.js"></script>
		<!-- main JS
		============================================ -->		
        <!--<script src="js/main.js"></script>-->
        <script>
		 $(function() {
                $('#header11').load("auction-head.html");
                $('#footer11').load('auction-footer.html');
            });
		//点击切换展示页面
		function changeActive(cid){
              if(cid==2){
              	  document.getElementsByClassName("tab-pane active")[0].className="tab-pane";
                  document.getElementById("cid2").className="tab-pane active";
			  }else if(cid==1){
				  document.getElementsByClassName("tab-pane active")[0].className="tab-pane";
				  document.getElementById("cid1").className="tab-pane active";
			  }else if(cid==3){
				  document.getElementsByClassName("tab-pane active")[0].className="tab-pane";
				  document.getElementById("cid3").className="tab-pane active";
			  }else if(cid==4){
				  document.getElementsByClassName("tab-pane active")[0].className="tab-pane";
				  document.getElementById("cid4").className="tab-pane active";
			  }
		};
		 var vm = new Vue({
			 el: '#item_box',
			 data(){
				 return {items:null, id:100}
			 },
			 methods:{
				 changeUrl: function(gid){
					 window.location.href = "product-details.html?gid=" + gid;
				 },
				 addEnshrine:function (gid) {
					 var temp=this;
					 axios.post('/web-goods/buyer/enshrine/'+gid+"/")
							 .then(alert("收藏成功"))
							 .catch(function (error) { // 请求失败处理
								 alert(error);
								 console.log(error);
							 });
				 },
				 init:function () {
					 axios
							 .get('/web-goods/show/selectPageHome')
							 .then(response => (this.items = response.data.data))
							 .catch(function (error) { // 请求失败处理
								 alert(error);
								 console.log(error);
							 });
				 }
			 },
			 mounted () {
			 	this.init()
			 }
		 })
		</script>
    </body>
</html>
